<template>
    <el-dialog v-model="show" title="收入凭证" width="35%" align-center @close="handleClose">
        <el-carousel >
            <el-carousel-item v-for="item in 2" :key="item">
                <img src="https://picsum.photos/200/300" style="width: 100%; height: 100%; object-fit: contain; " alt="">
            </el-carousel-item>
        </el-carousel>

        <div class="mt20" style="display: flex; justify-content: center; width: 100%;">
            <el-button plain @click="downloadImage('https://picsum.photos/200/300', 'image.jpg')" type="primary" link>下载凭证</el-button>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose()">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleClose = () => {
    emits('close');
};

const downloadImage = (url: string, filename: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>